<template>
	<view class="width-100">
		<urTabs></urTabs>
		
		
		
		
		
		
		
		
		<!-- 	头像 -->
		<view class="userHead height_r100">
			<view class="userHead_img">
				<fileImage :src="headPortrait" mode="aspectFill" defaultImg="/static/userInfoIco.svg"
					:className="['cidental']" />
			</view>
			<view class="userHead_info" @click="aaa(realName)">
				<view class="userHead_info_vita">
					<text class="userHead_info_name">{{ realName || '登录/注册' }}</text>
				</view>
				<!-- 点击跳转到个人信息clickPersonalInformation -->
				<view class="userHead_company" v-if="companyName">
					<view class="beyondCompany">
						<text>{{ companyName }}</text>
					</view>
					<image src="http://106.14.56.171:15016/images/u3089.png" />
				</view>
			</view>
		</view>
		<!-- 我的项目 -->
		<view class="prj">
			<view :class="myProjectType == index + 1 ? 'prj-item active' : 'prj-item' "
				v-for="(item,index) in myProject" @click="clickyMProject(item)">
				<!-- 数量 -->
				<text style="font-size: 40rpx;">{{item.num}}</text>
				<!-- 我的项目、公司的项目、我的关注 -->
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 施工状态 -->
		<view class="menu">
			<swiper indicator-dots :current="myProjectType - 1" @change="swiperChange" indicator-active-color="#b5001e">
				<swiper-item v-for="keys in steList">
					<view class="menu-item" @click="goToBar(item)" v-for="(item,index) in keys">
						<text class="numberSure">
							{{item.num}}
							<template v-if="TodayAddProjectCount&&TodayAddProjectCount.length">
								<text
									v-if=" TodayAddProjectCount.find(v=>v.type === myProjectType).statusList.find(v=>v.status == item.status).count"
									class="cornerMarkers">
									+{{ TodayAddProjectCount.find(v=>v.type === myProjectType).statusList.find(v=>v.status == item.status).count}}
								</text>
							</template>
						</text>
						<text>{{item.name}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<!-- 个人信息 -->
			<view class="list_personal" @click="goToDeatil()">
				<view>
					<image src="http://106.14.56.171:15016/images/u3137.png" />
					<text>个人信息</text>
				</view>
				<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" />
			</view>
			<!-- 我的发票 -->
			<view class="list_personal" @click="mineInvoice">
				<view>
					<image src="http://106.14.56.171:15016/images/u3237.png" />
					<text>我的发票</text>
				</view>
				<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
			</view>
			<!-- 我的积分  设置 -->
			<view class="list_personal" @click="mineIntegral">
				<view>
					<image src="http://106.14.56.171:15016/images/u3227.png" mode=""></image>
					<text>我的积分</text>
				</view>
				<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
			</view>
			<!-- 二维码推广 -->
			<view class="list_personal" @click="clickPersonal">
				<view>
					<image src="http://106.14.56.171:15016/images/u3127.png" mode=""></image>
					<text>二维码推广</text>
				</view>
				<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
			</view>
			<!-- 设置 -->
			<view class="list_personal" @click="goToDeatilt">
				<view>
					<image src="http://106.14.56.171:15016/images/u3097.png" mode=""></image>
					<text>设置</text>
				</view>
				<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				androidIos: '',
				name: '', //注册的名字
				userID: '', // 用户id
				realName: '', // 姓名
				headPortrait: '', // 头像
				department: '', // 部门
				email: '', // 邮件
				companyName: '', // 当前企业名称
				companyId: '', // 当前企业id
				userOrgList: [], // 拥有企业集合
				//我的项目
				myProject: [{
					name: '我的项目',
					type: 1,
					num: 0
				}, {
					name: '公司的项目',
					type: 2,
					num: 0
				}, {
					name: '我的关注',
					type: 3,
					num: 0
				}],
				// 状态
				steList: [
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0

						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0,
						}
					],
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0

						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0,
						}
					],
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0
						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0

						}
					]
				],
				UserProjectCount: [],
				TodayAddProjectCount: [],
				myProjectType: 1,
				limitLoad: false // 防止重复加载
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			fileImage
		},
		// 微信分享个人
		onShareAppMessage(options) {},
		// 微信分享到朋友圈
		onShareTimeline(options) {},
		//第一次加载
		onShow(e) {
			this.companyName = this.userInfo.corpName
			if (uni.getStorageSync("accessToken")) {
				this.newUserInfo();
				this.mineProject(); //我的项目mineProject
				this.addItems(); //增加项目
			} else {
				this.headPortrait = null
				this.realName = null
				this.companyName = null
				this.myProject = [{
					name: '我的项目',
					type: 1,
					num: 0
				}, {
					name: '公司的项目',
					type: 2,
					num: 0
				}, {
					name: '我的关注',
					type: 3,
					num: 0
				}]
				this.steList = [
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0

						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0,
						}
					],
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0

						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0,
						}
					],
					[{
							name: '施工中',
							status: 2,
							num: 0
						}, {
							name: '暂停中',
							status: 3,
							num: 0
						}, {
							name: '已完工',
							status: 4,
							num: 0
						},
						{
							name: '待签收',
							status: 8,
							num: 0
						},
						{
							name: '已收货',
							status: 5,
							num: 0
						}, {
							name: '已开票',
							status: 601,
							num: 0
						}, {
							name: '已回款',
							status: 701,
							num: 0
						}, {
							name: '已中止',
							status: 6,
							num: 0

						}
					]
				]
			}
		},
		onLoad() {
			this.androidIos = getApp().globalData.androidIos
		},
		methods: {
			...mapMutations(['setUserInfo']),
			newUserInfo: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				this.$httpNew.post('authApi/auth/GetUserInfo', {
					appId: this.androidIos
				}).then(lookUser => {
					this.limitLoad = false
					uni.hideLoading()
					this.headPortrait = lookUser.head
					this.realName = lookUser.name
					this.companyName = lookUser.corpName
				}).catch(errToken => {
					// console.log(errToken.data,'刷新Token');
				})
			}, 300),
			swiperChange({
				detail: {
					current
				}
			}) {
				this.myProjectType = current + 1
			},
			aaa(realName) {
				if (this.realName == null) {
					uni.navigateTo({
						url: './../login/login'
					})
				} else {
					uni.navigateTo({
						url: './user_detail/user_detail'
					})
				}

			},
			// 我的项目
			mineProject() {
				// console.log('---------陈', this.companyName);
				let data = {
					companyName: this.companyName,
				}
				this.$http.get('api/Project/GetUserProjectCount', data).then(res => {
					this.UserProjectCount = res;
					if (!Array.isArray(res)) return;
					res.forEach(el => {
						let i = this.myProject.findIndex(e => {
							return e.type == el.type
						})
						this.myProject[i].num = el.count;
					})
					// 默认的角标数据是"我的项目"
					this.clickyMProject();
				})
			},
			// 点击改变"状态"角标数据
			clickyMProject(item) {
				// console.log('----------------', item);
				let userCode = CurrentRouter({})
				if (userCode) return
				if (item) {
					this.myProjectType = item.type
				}
				this.steList.forEach(stelists => {
					stelists.forEach(steEach => {
						steEach.num = 0
						// console.log('fdhhhhhhhhhhhhh', steEach);
					})
				})

				this.UserProjectCount.forEach((v, index) => {
					let t = index
					v.statusList.forEach(item => {
						let index = this.steList[t].findIndex(e => {
							return e.status == item.status
						})
						if (index != -1) {
							this.steList[t][index].num = item.count;
						}
					})
				})
			},
			// 增加项目
			addItems() {
				let data = {
					companyName: this.companyName,
				}
				this.$http.get('api/Project/GetUserTodayAddProjectCount', data).then(res => {

					this.TodayAddProjectCount = res
				})

			},
			// 点击状态进行传值
			goToBar(item) {
				let userCode = CurrentRouter({})
				if (userCode) return
				// 在App.vue写一个方法:globalData
				// item.status;
				getApp().globalData.typeState = {
					projectType: this.myProjectType,
					...item
				}
				// taber页面进行跳转时不能进行传值
				uni.navigateTo({
					url: './../project/project_copy'
				});
			},
			goToDeatil() {
				let userCode = CurrentRouter({})
				if (userCode) return
				uni.navigateTo({
					url: './user_detail/user_detail'
				});
			},
			goToDeatilt() {
				let userCode = CurrentRouter({})
				if (userCode) return
				uni.navigateTo({
					url: './setting'
				});
			},

			// 跳转到app下载页
			aqrCode() {
				uni.navigateTo({
					url: './appdownload'
				})
			},

			// 我的发票
			mineInvoice() {
				uni.showToast({
					title: '待开放',
					icon: 'none'
				})
			},
			// 我的积分
			mineIntegral() {
				uni.showToast({
					title: '待开放',
					icon: 'none'
				})
			},
			// 二维码推广
			clickPersonal() {
				let userCode = CurrentRouter({})
				if (userCode) return
				uni.navigateTo({
					url: 'qrcode'
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.width-100 {
		background-size: 100%;
		height: 100%;
		/* 立即看效果的可以设置宽高，用内容填充的就不需要 */
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.height_r100 {
		height: 120rpx;
		margin-top: 38rpx;
		/* background-color: aqua; */
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.userHead {
		display: flex;
		flex-direction: row;
	}

	.userHead_img {
		margin-left: 30rpx;
		width: 140rpx;
		height: 140rpx;
	}

	.userHead_info {
		width: 70%;
		// background-color: aqua; 
	}

	.userHead_info .userHead_info_name {
		font-size: 30rpx;
		color: #333333;
	}

	.userHead_info .userHead_info_name+text {
		font-size: 28rpx;
		margin-left: 30rpx;
		color: #616161;
		line-height: 28rpx;
	}

	.userHead_info .userHead_company image {
		/* margin-left: 20rpx; */
		position: relative;
		left: -40rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.userHead_info .userHead_company text {
		font-size: 28rpx;
	}

	.userHead_company {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		/* background-color: red; */
	}

	/*  超出公司名称,超出的部分为省略号 */
	.beyondCompany {
		width: 80%;
		/*溢出隐藏,超出部分变成省略号*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: left;
		/* background-color: darkturquoise; */
	}

	.userHead_icon {
		width: 12%;
	}

	.userHeadImg {
		height: 10rpx;
		background-color: #007aff;
	}

	.prj {
		height: 100rpx;
		display: flex;
		margin-top: 44rpx;
		/* background-color: aqua; */
	}

	.prj .prj-item {
		width: 33%;
		text-align: center;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #333333;
		font-size: 30rpx;
		transition: font-size 0.2s;
	}

	.prj .prj-item.active {
		color: #c49338;
		font-weight: 800;
	}

	.userHead .userHead_icon image {
		margin-top: 35rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.list {
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		top: 25rpx;
		width: 96%;
		margin-left: 2%;
	}

	.list_personal {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		line-height: 120rpx;
		padding: 0rpx 10rpx 0rpx 40rpx;
	}

	.list_personal text {
		color: #333333;
		font-size: 32rpx;
	}

	.list_personal image {
		position: relative;
		top: 10rpx;
		width: 44rpx;
		height: 44rpx;
		margin-right: 25rpx;
	}

	.list_personal .list_personal_icon {
		margin-top: 32rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.menu {
		width: 100%;
		height: 340rpx;
		background-color: #ffffff;
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		border-radius: 25rpx;
		width: 96%;
		margin: auto;
		margin-top: 3%;
		font-size: 22rpx;

		swiper {
			width: 100%;
			height: 340rpx;
			// background-color: red;

		}

	}

	swiper-item {
		display: flex;
		flex-wrap: wrap;
	}

	swiper-item>view {
		width: 25%;
		height: 30%;
		// background-color: #c49338;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}



	// .menu-item:nth-child(2n+1) {
	// 	background-color: aqua;
	// }

	swiper-item>view:nth-child(1),
	swiper-item>view:nth-child(2),
	swiper-item>view:nth-child(3),
	swiper-item>view:nth-child(4) {
		margin-top: 30rpx;
	}

	/* 角标 */
	.cornerMarkers {
		color: #b5001e;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.numberSure {
		color: black;
		font-size: 36rpx;
	}




	/* 二维码 */
	.qrCode {
		width: 96%;
		margin: auto;
		height: 120rpx;
		display: flex;
		/* justify-content: space-between; */
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		top: 38rpx;
	}

	.imgasText {
		/* width: 45%; */
		position: relative;
		left: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center; //上下居中
	}

	.imgasText>image {
		width: 118rpx;
		height: 118rpx;
	}

	.imgasText>text:nth-child(4) {
		position: relative;
		left: 38rpx;
		font-size: 10rpx;
		color: #616161;
	}

	.imgasText>image:nth-child(5) {
		position: relative;
		left: 78rpx;
		width: 38rpx;
		height: 38rpx;
	}


	.home {}
</style>
<style lang="scss">
	.cidental {
		width: 140rpx;
		height: 140rpx;
		border-radius: 70rpx;
	}
</style>